<template>
  <div class="app-container">
    <div>
      <div class="order-status-base">
        <div class="order-status">
          <div class="order-status-title">订单状态：</div>
          <div class="order-status-value"><dict-tag :options="dict.type.order_type" :value="detail.orderVO.status"/></div>
        </div>
        <div class="order-status-button">
          <span><el-button type="primary" size="small" @click="goVerification">核销</el-button></span>
          <span><el-button type="primary" size="small" @click="refund" v-hasPermi="['system:orderDetail:refund']">退款</el-button></span>
        </div>
      </div>
      <div class="order-status-desc" v-if="detail.orderVO.status == 2 && detail.orderVO.verificationCode">
        <span>已生成核销码</span>
      </div>
      <div class="order-status-desc" v-if="detail.orderVO.status == 5">
        <span>订单已完成</span>
      </div>
      <div class="order-status-desc" v-if="detail.orderVO.status == 1">
        <span>超时未付款将自动关闭</span>
      </div>
      <div class="fund-status-base">
        <div class="fund-status-title">资金状态：</div>
        <div class="fund-status-value">{{ detail.orderVO.settlementStatus == 2 ? '已结算':'待结算' }}</div>
      </div>
      <div class="fund-status-desc" v-if="detail.orderVO.settlementStatus == 1">
        <span>核销后立即结算，已认证商家生成核销码，3天后自动结算到账，未认证商家必须核销后才能结算到账</span>
      </div>
    </div>

    <el-divider></el-divider>

    <div class="user-info-base">
      <h2 class="user-info-title">用户信息</h2>
      <div class="user-info-group">
        <div class="info-group-item">微信昵称：{{ detail.wxUserVO.nickname }}</div>
        <div class="info-group-item">孩子姓名：{{ detail.orderVO.enrollName }}</div>
        <div class="info-group-item">手机号码：{{ detail.orderVO.enrollMobile }}</div>
        <template v-for="(item, index) in collectRule">
          <div v-if="index > 1" class="info-group-item" :key="index">{{item.label}} ：{{ detail.orderVO.enrollOther[index] }}</div>
        </template>
      </div>
    </div>

    <el-divider></el-divider>

    <div class="order-info-base">
      <h2 class="order-info-title">订单信息</h2>
      <div class="order-info-group">
        <div class="order-info-group-item">订单来源：{{ detail.orderVO.activityTitle }}</div>
        <div class="order-info-group-item">订单编号：{{ detail.orderVO.orderNo }}</div>
        <div class="order-info-group-item">
          <span>核销人：</span>
          <span v-if="detail.verificationStaff.realname">{{ detail.verificationStaff.realname }}</span>
          <span v-else>-</span>
        </div>
        <div class="order-info-group-item">
          <span>核销时间：</span>
          <span v-if="detail.orderVO.verificationTime">
            {{ parseTime(detail.orderVO.verificationTime) }}
          </span>
          <span v-else>-</span>
        </div>
        <div class="order-info-group-item">用户下单：{{ parseTime(detail.orderVO.createTime) }}</div>
        <div class="order-info-group-item">
          <span>买家付款：</span>
          <span v-if="detail.paymentBillVO && detail.paymentBillVO.isPay == 1">{{ parseTime(detail.paymentBillVO.updateTime) }}</span>
          <span v-else>-</span>
        </div>
      </div>
      <h2 class="pay-info-title">支付信息</h2>
      <div class="pay-info">
        <div class="pay-info-item">
          <span>支付单号：</span>
          <span v-if="detail.paymentBillVO">{{ detail.paymentBillVO.billSn }}</span>
          <span v-else>-</span>
        </div>
        <div class="pay-info-item">
          <span>支付时间：</span>
          <span v-if="detail.paymentBillVO && detail.paymentBillVO.isPay == 1">{{ parseTime(detail.paymentBillVO.updateTime) }}</span>
          <span v-else>-</span>
        </div>
      </div>
      <el-table :data="goodsDataList">
        <el-table-column label="商品" key="welfareName" width="500">
          <template slot-scope="scope">
            <div class="order-detail-goods-base">
              <div class="order-detail-goods-img">
                <img src="../../../assets/images/activity/gooddefault.png" alt=""/>
              </div>
              <div class="order-detail-goods-info">
                <template v-if="scope.row.groupPurchaseStatus == 1">
                  <div>
                    <span>未成团</span>
                  </div>
                </template>
                <template v-else>
                  <div>
                    <span>{{ '（' + scope.row.personnelNumber + '人团）'}}</span>
                    <span>{{ scope.row.welfareName }}</span>
                  </div>
                </template>
                <span class="tag-gap"><el-tag type="warning" effect="dark"><dict-tag :options="dict.type.team_nature" :value="scope.row.nature"/></el-tag></span>
                <span class="tag-gap" v-if="scope.row.oneDistributionAmount && Number(scope.row.oneDistributionAmount) > 0"><el-tag type="warning" effect="dark">一级分销</el-tag></span>
                <span class="tag-gap" v-if="scope.row.twoDistributionAmount && Number(scope.row.twoDistributionAmount) > 0"><el-tag type="warning" effect="dark">二级分销</el-tag></span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价（元）" key="price">
          <template slot-scope="scope">
            <span>200</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" key="groupPurchaseGoodsNumber" prop="groupPurchaseGoodsNumber"/>
        <el-table-column label="规格" key="orderNo4" prop="orderNo4"/>
        <el-table-column label="优惠（元）" key="orderNo5" prop="orderNo5">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.price && Number(scope.row.price) > 0">{{ '￥' + (200 - Number(scope.row.price)) }} ~ {{ '￥' + (200 - Number(scope.row.price)) }}</span>
              <span v-else>￥0.00</span>
            </div>
            <div>活动优惠</div>
          </template>
        </el-table-column>
        <el-table-column label="拼团信息" key="groupPurchaseList">
          <template slot-scope="scope">
            <template v-for="(item, index) in scope.row.goodsItemList">
              <div :key="index">{{ item.constituteNumber }} 人：{{ (Number(scope.row.price) > 0 ? scope.row.price : '0') + '元' }}</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="总计" key="total">
          <template slot-scope="scope">
            <span v-if="scope.row.price">{{ '￥' + scope.row.price }} ~ {{ '￥' + scope.row.price }}</span>
            <span v-else>￥0.00</span>
          </template>
        </el-table-column>
        <el-table-column label="结算" key="settlement" width="200">
          <template slot-scope="scope">
            <div>支付金额：￥{{ scope.row.realityPayAmount }}</div>
<!--            <div>微信支付手续费：￥{{ scope.row.commission }}</div>-->
            <div>微信支付手续费：￥{{ scope.row.amountTotal * 10/1000 }}</div>
            <div>分佣金额：￥{{ (Number(scope.row.oneDistributionAmount) + Number(scope.row.twoDistributionAmount)) | numFilter }}</div>
            <div>实收金额：￥{{ scope.row.actualAmount }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="refund-info-base">
      <h2 class="refund-info-title">退款信息</h2>
      <div class="refund-info-group">
        <div class="refund-info-item">
          <span>退款方式：</span>
          <span v-if="detail.refundTradeVO.refundType">{{ detail.refundTradeVO.refundType === 'auto'? '自动': detail.refundTradeVO.refundType === 'manual'? '手动':'-' }}</span>
          <span v-else>-</span>
        </div>
        <div class="refund-info-item">
          <span>发起时间：-</span>
        </div>
        <div class="refund-info-item">
          <span>审核结果：-</span>
        </div>
        <div class="refund-info-item">
          <span>审核时间：-</span>
        </div>
        <div class="refund-info-item">
          <span>退款支付订单号：</span>
          <span v-if="detail.refundTradeVO.refundNo">{{ detail.refundTradeVO.refundNo }}</span>
          <span v-else>-</span>
        </div>
        <div class="refund-info-item">
          <span>退款状态：-</span>
        </div>
      </div>
    </div>

    <el-divider></el-divider>

    <div class="group-purchase-info-base">
      <h2 class="group-purchase-info-title">拼团信息</h2>
      <div v-if="detail.orderVO.status == 2 || detail.orderVO.status == 5" class="group-purchase-info">
        <div class="group-purchase-info-item">
          <span v-if="detail.memberGroupPurchaseVO.status">
            拼团状态：<dict-tag style="display: inline-block" :options="dict.type.team_status" :value="detail.memberGroupPurchaseVO.status"/>
          </span>
          <span v-else>拼团状态：待成团</span>
        </div>
        <div class="group-purchase-info-item">
          <span v-if="detail.memberGroupPurchaseVO.memberId !== detail.orderVO.memberId && detail.memberGroupPurchaseVO.status != -1">
            团内身份：团员
          </span>
          <span v-else-if="detail.memberGroupPurchaseVO.status == -1">团内身份：-</span>
          <span v-else>团内身份：团长</span>
        </div>
        <div class="group-purchase-info-item">
          <span v-if="detail.memberGroupPurchaseVO.teamName && detail.memberGroupPurchaseVO.status != -1">
            所属团：{{ detail.memberGroupPurchaseVO.teamName }}的团
          </span>
          <span v-else>所属团：-</span>
        </div>
        <div class="group-purchase-info-item">
          <span v-if="detail.memberGroupPurchaseVO.personnelNumber">
            支付人数：{{ detail.memberGroupPurchaseVO.personnelNumber }}人
          </span>
          <span v-else>支付人数：0人</span>
        </div>
      </div>
      <div v-else class="group-purchase-info">
        <div class="group-purchase-info-item">
          <span>拼团状态：待成团</span>
        </div>
        <div class="group-purchase-info-item">
          <span>团内身份：团长</span>
        </div>
        <div class="group-purchase-info-item">
          <span>所属团：-</span>
        </div>
        <div class="group-purchase-info-item">
          <span>支付人数：0人</span>
        </div>
      </div>
      <el-table :data="groupPurchaseList">
        <el-table-column label="微信昵称" key="wx">
          <template slot-scope="scope">
            <div class="staffInfo">
              <image-preview :src="scope.row.avatarUrl" :width="30" :height="30"/>
              <div class="nickname">
                {{ scope.row.nickname }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" key="registerName" prop="registerName"/>
        <el-table-column label="手机号" key="registerMobile" prop="registerMobile"/>
        <el-table-column label="团内身份" key="identity" prop="identity">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.team_identity" :value="scope.row.identity"/>
          </template>
        </el-table-column>
        <el-table-column label="参团时间" key="createTime" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.identity == 1" @click="goReduce(scope.row)">降为团员</el-button>
            <el-button type="text" v-if="scope.row.identity == 2" @click="goUpgrade(scope.row)">升为团长</el-button>
            <el-button type="text" @click="goIsolate(scope.row)">独立成团</el-button>
            <el-button type="text" @click="goRemoveTeam(scope.row)">移团</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="核销" :visible.sync="verificationOpen" width="400px">
      <el-input v-model="verificationCode" placeholder="请输入核销码"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitVerification">确 定</el-button>
        <el-button size="mini" @click="verificationOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="请选择移至的团" :visible.sync="removeTeamOpen" width="700px" append-to-body>
      <el-input
        style="width: 100%"
        v-model="removeTeamParams.keyword"
        placeholder="请输入要搜索的团长昵称、姓名或手机号"
        clearable
        @keyup.enter.native="handleQueryTeamList">
        <el-button circle slot="append" icon="el-icon-search" @click="handleQueryTeamList"></el-button>
      </el-input>
      <el-table
        :data="removeTeamList"
        style="width: 100%"
        ref="radioTable"
        :header-cell-style="{background:'#eef1f6',color:'#909399'}"
        fixed
        @row-click="rowClick"
        @selection-change="selectionChange"
        stripe>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="团长" key="nickname">
          <template slot-scope="scope">
            <div class="wxInfoTitle">
              <image-preview class="wxInfoImg" :src="scope.row.avatarUrl" :width="50" :height="50"/>
              <div class="wxInfo">
                <div class="wxInfoItem">{{ scope.row.nickname }}</div>
                <div class="wxInfoItem">
                  <span>{{ scope.row.registerName }}</span>
                  <span>{{ scope.row.registerMobile }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="personnelNumber" key="personnelNumber" label="团人数"/>
      </el-table>
      <pagination
        v-show="removeTeamTotal>0"
        :total="removeTeamTotal"
        :page.sync="removeTeamParams.pageNum"
        :limit.sync="removeTeamParams.pageSize"
        @pagination="getQueryTeamList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitRemoveToTeam">确认</el-button>
        <el-button size="mini" @click="removeTeamOpen = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {isolate, moveToTeam, orderDetail, orderVerification, reduce, refund, upgrade} from "@/api/triones/order";
import {activityDetailById, queryCanMoveTeamList} from "@/api/triones/activity";
export default {
  name: "orderDetail",
  dicts: ['order_type','team_status','team_nature','team_identity'],
  data() {
    return {
      goodsDataList: [],
      groupPurchaseList: [],
      detail: {},
      verificationOpen: false,
      verificationCode: undefined,
      verificationOrderId: undefined,
      removeTeamOpen: false,
      removeTeamParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        activityId: undefined,
        groupPurchaseId: undefined,
        orderId: undefined
      },
      removeTeamList: [],
      removeTeamTotal: 0,
      selectData :{},
      ids: [],
      single: true,
      multiple: true,
      collectRule: []
    }
  },
  filters: {
    numFilter (value) {
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  created() {
    const orderId = this.$route.params.id;
    this.getOrderDetail(orderId);
  },
  methods: {
    /** 获取活动详情 */
    getActivityById(id) {
      activityDetailById(id).then(response => {
        this.activityDetail = response.data;
        if (response.data) {
          const content = JSON.parse(response.data.content);
          if (content) {
            this.collectRule = content.enroll_info_collect.collect_rule;
          }
        }
      });
    },
    /** 获取订单详情 */
    getOrderDetail(orderId){
      this.resetDetail();
      const dataItem = {};
      orderDetail(orderId).then(response => {
        if (response.data.refundTradeVO) {
          this.detail.refundTradeVO = response.data.refundTradeVO;
        }
        if (response.data.paymentBillVO) {
          this.detail.paymentBillVO = response.data.paymentBillVO;
        }
        if (response.data.orderVO) {
          this.detail.orderVO = response.data.orderVO;
          if (response.data.orderVO.enrollOther) {
            this.detail.orderVO.enrollOther = JSON.parse(response.data.orderVO.enrollOther);
          }
          dataItem.groupPurchaseGoodsNumber = response.data.orderVO.groupPurchaseGoodsNumber;
          dataItem.oneDistributionAmount = response.data.orderVO.oneDistributionAmount;
          dataItem.twoDistributionAmount = response.data.orderVO.twoDistributionAmount;
          dataItem.realityPayAmount = response.data.orderVO.realityPayAmount;
          dataItem.actualAmount = response.data.orderVO.actualAmount;
          dataItem.commission = response.data.orderVO.commission;
          dataItem.amountTotal = response.data.orderVO.amountTotal;
        }
        if (response.data.groupPurchaseGoodsVO) {
          this.detail.groupPurchaseGoodsVO = response.data.groupPurchaseGoodsVO;
          dataItem.price = response.data.groupPurchaseGoodsVO.price;
        }
        if (response.data.memberGroupPurchaseVO) {
          this.detail.memberGroupPurchaseVO = response.data.memberGroupPurchaseVO;
          dataItem.personnelNumber = response.data.memberGroupPurchaseVO.personnelNumber;
          dataItem.groupPurchaseStatus = response.data.memberGroupPurchaseVO.status;
          dataItem.nature = response.data.memberGroupPurchaseVO.nature;
        }
        if (response.data.wxUserVO) {
          this.detail.wxUserVO = response.data.wxUserVO;
        }
        if (response.data.verificationStaff) {
          this.detail.verificationStaff = response.data.verificationStaff;
        }
        if (response.data.goodsItemList && response.data.goodsItemList.length > 0) {
          for (const item of response.data.goodsItemList) {
            if (response.data.orderVO && response.data.orderVO.groupPurchaseGoodsItemId === item.id) {
              dataItem.welfareName = item.welfareName;
              break;
            }
          }
          dataItem.goodsItemList = response.data.goodsItemList;
        } else {
          dataItem.welfareName = '';
        }
        if (response.data.groupPurchaseItemList && response.data.groupPurchaseItemList.length > 0 && (response.data.orderVO.status == 2 || response.data.orderVO.status == 5)) {
          this.groupPurchaseList = response.data.groupPurchaseItemList;
        }
        this.goodsDataList.push(dataItem);
        this.$nextTick(() => {
          this.getActivityById(this.detail.orderVO.activityId);
        })
      })
    },
    /** 重置 */
    resetDetail() {
      this.detail = {
        refundTradeVO: {
          id: undefined,
          refundNo: undefined,
          refundType: undefined,
          launchTime: undefined,
          refundAmount: undefined,
          auditUserId: undefined,
          auditUserName: undefined,
          auditTime: undefined,
          auditStatus: undefined,
          auditRemark: undefined,
          refundStatus: undefined,
          thirdTradeNo: undefined,
          orderNo: undefined,
          refundWay: undefined,
          refundTime: undefined,
          userId: undefined,
          createTime: undefined
        },
        paymentBillVO: {
          billId: undefined,
          billSn: undefined,
          orderNo: undefined,
          returnTradeNo: undefined,
          isPay: undefined,
          paymentName: undefined,
          tradePrice: undefined,
          paymentPlugin: undefined,
          paymentRemark: undefined,
          userId: undefined,
          updateTime: undefined
        },
        orderVO: {
          id: undefined,
          orderNo: undefined,
          memberId: undefined,
          memberWxUserId: undefined,
          activityId: undefined,
          activityTitle: undefined,
          groupPurchaseGoodsId: undefined,
          groupPurchaseGoodsNumber: undefined,
          groupPurchaseGoodsItemId: undefined,
          enrollName: undefined,
          enrollMobile: undefined,
          enrollOther: undefined,
          amountTotal: undefined,
          oneDistributionAmount: undefined,
          twoDistributionAmount: undefined,
          performanceStaffId: undefined,
          staffWxUserId: undefined,
          staffRewardAmount: undefined,
          rebateAmount: undefined,
          commission: undefined,
          realityPayAmount: undefined,
          actualAmount: undefined,
          collectionChannel: undefined,
          collectionMiniApp: undefined,
          status: undefined,
          verificationStaffId: undefined,
          verificationTime: undefined,
          remark: undefined,
          userId: undefined,
          groupPurchaseId: undefined,
          groupPurchaseItemId: undefined,
          shareRecordId: undefined,
          orderSource: undefined,
          closeReason: undefined,
          settlementStatus: undefined,
          verificationCode: undefined,
          verificationQrCode: undefined,
          optionalIdentity: undefined,
          shareId: undefined,
          createTime: undefined
        },
        groupPurchaseGoodsVO: {
          id: undefined,
          goodsNo: undefined,
          goodsName: undefined,
          goodsSubtitle: undefined,
          price: undefined,
          remark: undefined,
          userId: undefined,
          isInventory: undefined,
          inventoryNumber: undefined,
          overflowNumber: undefined,
          nature: undefined
        },
        goodsItemList: [],
        memberGroupPurchaseVO: {
          id: undefined,
          teamName: undefined,
          maxPersonnelNumber: undefined,
          personnelNumber: undefined,
          nature: undefined,
          status: undefined,
          userId: undefined,
          memberId: undefined,
          memberWxUserId: undefined,
          activityId: undefined,
          groupPurchaseGoodsId: undefined,
          groupPurchaseGoodsItemId: undefined,
          nextGroupPurchaseGoodsItemId: undefined
        },
        groupPurchaseItemList: [],
        wxUserVO: {
          id: undefined,
          openId: undefined,
          avatarUrl: undefined,
          nickname: undefined,
          mobile: undefined,
          createTime: undefined,
          unionId: undefined
        },
        verificationStaff: {
          id: undefined,
          wxUserId: undefined,
          memberId: undefined,
          realname: undefined,
          mobile: undefined,
          wxQrCode: undefined,
          isVerification: undefined,
          userId: undefined
        }
      }
    },
    /** 退款 */
    refund() {
      const orderId = this.$route.params.id;
      this.$modal.confirm('是否确认退款？').then(function() {
        return refund(orderId);
      }).then(() => {
        this.getOrderDetail(orderId)
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 去核销 */
    goVerification() {
      this.verificationCode = undefined;
      this.verificationOpen = true;
    },
    /** 确认核销 */
    submitVerification() {
      const orderId = this.$route.params.id;
      if (!this.verificationCode) {
        return this.$message.error('核销码不能为空');
      }
      const params = {
        id: orderId,
        verificationCode: this.verificationCode
      }
      orderVerification(params).then(response => {
        this.verificationOpen = false;
        this.getOrderDetail(orderId);
        this.$message.success("核销成功");
      })
    },
    /** 升为团长 */
    goUpgrade(row) {
      const orderId = row.orderId;
      this.$modal.confirm('是否确定升为团长').then(() => {
        return upgrade(orderId);
      }).then(() => {
        this.getOrderDetail(this.$route.params.id);
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 降为团员 */
    goReduce(row) {
      const orderId = row.orderId;
      this.$modal.confirm('是否确定降为团员').then(() => {
        return reduce(orderId);
      }).then(() => {
        this.getOrderDetail(this.$route.params.id);
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 独立成团 */
    goIsolate(row) {
      const orderId = row.orderId;
      this.$modal.confirm('是否独立成团？确定后此用户将从该团移出，并创建团').then(() => {
        return isolate(orderId);
      }).then(() => {
        this.getOrderDetail(this.$route.params.id);
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 移团 */
    goRemoveTeam(row) {
      this.removeTeamParams.groupPurchaseId = row.groupPurchaseId;
      this.removeTeamParams.activityId = row.activityId;
      this.removeTeamParams.orderId = row.orderId;
      this.getQueryTeamList();
      this.removeTeamOpen = true;
    },
    /** 检索可移动团列表 */
    handleQueryTeamList() {
      this.removeTeamParams.pageNum = 1;
      this.getQueryTeamList();
    },
    /** 获取可移动团列表 */
    getQueryTeamList() {
      queryCanMoveTeamList(this.removeTeamParams).then(response => {
        this.removeTeamList = response.rows;
        this.removeTeamTotal = response.total;
      })
    },
    /** 移团提交 */
    submitRemoveToTeam() {
      moveToTeam(this.selectData.id,this.removeTeamParams.orderId).then(response => {
        this.selectData = {};
        this.removeTeamOpen = false;
        this.getOrderDetail(this.$route.params.id);
        this.$message.success("操作成功");
      }).finally(() => {
        this.selectData = {};
        this.removeTeamOpen = false;
      });
    },
    rowClick(row, column) {
      this.$refs.radioTable.toggleRowSelection(row);
    },
    selectionChange(val) {
      if(val.length>1){
        this.$refs.radioTable.clearSelection()
        this.$refs.radioTable.toggleRowSelection(val.pop())
      }else{
        this.selectData = val.pop()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.order-status-base{
  display: flex;
  justify-content: center;
  font-size: 18px;
  padding: 5px 0;
  .order-status {
    width: 50%;
    text-align: left;
    display: flex;
    justify-items: center;
  }
  .order-status-button {
    width: 50%;
    text-align: right;
  }
  .order-status-value {
    font-weight: bold;
  }
}

.order-status-button {
  span{
    padding: 0 10px;
  }
}

.order-status-desc{
  font-size: 14px;
  padding-bottom: 8px;
}

.fund-status-base{
  display: flex;
  justify-items: center;
  font-size: 18px;
  padding: 5px 0;
  .fund-status-value {
    font-weight: bold;
  }
}

.fund-status-desc{
  font-size: 14px;
  padding-bottom: 8px;
}

.user-info-base {
  .user-info-title{
    font-size: 16px;
    font-weight: bold;
  }
  .user-info-group{
    display: flex;
    justify-items: left;
    flex-wrap: wrap;
    .info-group-item {
      width: 25%;
      padding: 5px 0;
      font-size: 14px;
    }
  }
}


.order-info-title{
  font-size: 16px;
  font-weight: bold;
}

.order-info-base {
  .order-info-group {
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    .order-info-group-item {
      width: 25%;
      padding: 5px 0;
      font-size: 14px;
    }
  }
}

.pay-info-title{
  font-size: 16px;
  font-weight: bold;
}

.pay-info {
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  .pay-info-item {
    width: 25%;
    padding: 5px 0;
    font-size: 14px;
  }
}

.refund-info-base {
  .refund-info-title{
    font-size: 16px;
    font-weight: bold;
  }
  .refund-info-group {
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    .refund-info-item {
      width: 25%;
      padding: 5px 0;
      font-size: 14px;
    }
  }
}

.refund-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25%);
  font-size: 14px;
  div{
    padding: 3px 0;
  }
}

.group-purchase-info-base {
  padding-bottom: 50px;
}

.group-purchase-info-title{
  font-size: 16px;
  font-weight: bold;
}

.group-purchase-info {
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  .group-purchase-info-item {
    width: 25%;
    padding: 5px 0;
    font-size: 14px;
  }
}

.order-detail-goods-base {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  .order-detail-goods-img {
    img {
      width: 70px;
    }
  }
  .order-detail-goods-info {
    padding-left: 5px;
    align-content: center;
  }
}
.tag-gap {
  padding-right: 5px;
}

.staffInfo{
  display:flex;
  width: 200px;
  text-align: center;
  .nickname {
    align-content: center;
    padding-left: 10px;
  }
}

.wxInfoTitle{
  display:flex;
  width: 100%;
  height: 100%;
  .wxInfoImg {
    vertical-align: middle;
  }
}

.wxInfo {
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  align-content: center;
  vertical-align: middle;
  .wxInfoItem {
    padding: 3px 0;
    font-size: 12px;
    line-height: 12px;
  }
}
</style>
